{% extends 'front/nav.html' %}

{% block main %}
<!-- 轮播图容器 -->
    <div id="homeCarousel" class="carousel slide mx-auto"
     style="max-width: 800px;">

    <!-- 轮播指示器 -->
    <div class="carousel-indicators"></div>
    <!-- 轮播内容 -->
    <div class="carousel-inner"></div>
</div>

<script>
document.addEventListener('DOMContentLoaded', () => {
    Fetch('{{ url_for('systemallfunctions') }}', 'GET', {}, function (res) {
        if (res.status === 'success') {
            const data = res.data;
            const indicators = document.querySelector('#homeCarousel .carousel-indicators');
            const inner = document.querySelector('#homeCarousel .carousel-inner');

            data.forEach((item, index) => {
                // 添加指示器
                const indicator = document.createElement('button');
                indicator.type = 'button';
                indicator.setAttribute('data-bs-target', '#homeCarousel');
                indicator.setAttribute('data-bs-slide-to', index);
                if (index === 0) indicator.classList.add('active');
                indicators.appendChild(indicator);

                // 添加轮播项
                const carouselItem = document.createElement('div');
                carouselItem.classList.add('carousel-item');
                if (index === 0) carouselItem.classList.add('active');

                carouselItem.innerHTML = `
                    <div style="height: 400px; overflow: hidden; display: flex; justify-content: center; background-color: #f8f9fa;">
                        <img src="${item.img}" style="height: 100%; width: auto; object-fit: contain;" class="d-block" alt="Slide ${index + 1}">
                    </div>
                    <div class="carousel-caption d-none d-md-block bg-dark bg-opacity-50 rounded">
                        <h5>${item.title}</h5>
                        <p>${item.desc}</p>
                        <a href="${item.link}" class="btn btn-primary mt-2">了解更多</a>
                    </div>
                `;

                inner.appendChild(carouselItem);
            });

            // 手动初始化轮播图
            const carousel = new bootstrap.Carousel(document.querySelector('#homeCarousel'), {
                interval: 3000,  // 自动切换时间，单位毫秒
                ride: 'carousel' // 启用自动播放
            });
        }
    });
});

</script>


<!-- 特色内容区 -->
<div class="container mt-5">
    <div class="row g-4">
        <div class="col-md-4 text-center">
            <div class="p-4 border rounded bg-light h-100">
                <i class="bi bi-speedometer2 fs-1 text-primary mb-3"></i>
                <h3>快速高效</h3>
                <p class="mb-0">我们的服务响应迅速，处理高效，为您节省宝贵时间。</p>
            </div>
        </div>
        <div class="col-md-4 text-center">
            <div class="p-4 border rounded bg-light h-100">
                <i class="bi bi-shield-check fs-1 text-primary mb-3"></i>
                <h3>安全可靠</h3>
                <p class="mb-0">采用最先进的安全技术，保障您的数据和隐私安全。</p>
            </div>
        </div>
        <div class="col-md-4 text-center">
            <div class="p-4 border rounded bg-light h-100">
                <i class="bi bi-people fs-1 text-primary mb-3"></i>
                <h3>用户至上</h3>
                <p class="mb-0">以用户需求为中心，提供个性化定制服务。</p>
            </div>
        </div>
    </div>
</div>
{% endblock %}